{extend name="common/base" /}
<!--title-->
{block name="titlekeyword"}
<title>{$content}</title>
{/block}
<!--下面 每个页面的特色css-->

{block name="titleStyle"} 
<style>
.gamediv{  
    width: 500px;  
    height: 400px;  
    background-color: pink;  
}  
  
/*表格样式*/  
.controlcenter{  
    width: 200px;  
    height: 200px;  
    border: 1px solid red;   
}  
</style>
{/block}
<!--代码主要内容-->
{block name="main"}
<h6>内容</h6>
<div class="gamediv">  
	<!--用到了绝对定position:absolute位，使left起作用--> 
		<img id="mymario" src="mario.jpg" style="left:100px; top:50px; position:absolute;" /> 
		 
	</div>  
		<table border="1px" class="controlcenter">  
			<tr>  
				<td colspan="3">游戏键盘</td>  
			</tr>  
			<tr>  
				<td>**</td>  
				<td><input type="button" value="↑↑" onclick="marioMove(1)" /></td>  
				<td>**</td>  
			</tr>  
							<tr>  
				<td><input type="button" value="←←" /></td>  
				<td>**</td>  
				<td><input type="button" value="→→" /></td>  
			</tr>  
							<tr>  
				<td>**</td>  
				<td><input type="button" value="↓↓" /></td>  
				<td>**</td>  
			</tr>  
		</table>  
<h6>代码</h6>
<pre>


	 </pre> {/block}
<!--底部js 在这里是js的实际代码区-->
{block name="footjs"}
<script language="javascript">

	function Mario(){
 this.x=0;  
 this.y=0;  
  
                //移动 顺时针 0->上 1->右 2->下 3->左  
                this.move=function(direct){  
                    switch(direct){  
                        case 1:  
                            //window.alert("mario 右移动");  
                            //获取61行的id= mymario 
                            var mymario=document.getElementById('mymario');  
                            //取出 img 的top值  
                            //window.alert(mymario.style.top);  
  
                            //怎样去掉50px的px  
                            var top=mymario.style.top;  
                            //px占据两个，即lenght-2  
                            //substr截取  parseint解析字符串，返回整型
                             top=parseInt(top.substr(0,top.length-2));  
                            //window.alert(top);  
  
                            mymario.style.top=(top+2)+"px"; //开始移动2px，看怎么拼接的，字符串和数值之间的转换  
                            //此时mario就可以向下移动了，把上面的打印调试输出代码都注释掉  
                            break;  
                    }  
                }  
            }  
  
            //创建Mario对象  
            var mario=new Mario();  
  
            //全局函数  
            function marioMove(direct){  //direct对应onclick="marioMove(1)的1
                switch(direct){  
                    case 1:  
                        mario.move(direct);  
                        break;  
                    case 0:  
                        break;  
                    case 2:  
                        break;  
                    case 3:  
                        break;  
                }  
            }  
		

	

</script> {/block}